<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myAccount</title>

</head>

<body>
    <%= require('./common/header.htm')%>
        <div id="Content">
            <div id="Catalog">



                <form id="updateAccount">

                    <h3>User Information</h3>

                    <table>
                        <tbody>
                            <tr>
                                <td>User ID:</td>
                                <td><input id="username" name="username" readonly> </td>
                            </tr>
                            <tr>
                                <td>New password:</td>
                                <td><input id="newPassword" name="password" type="password">

                                </td>
                                <td id="passwordTips"></td>
                            </tr>
                            <tr>
                                <td>Repeat password:</td>
                                <td><input name="repeatedPassword" id="repeatedPassword" type="password"></td>
                                <td id="repeatedPasswordTips"></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="button" value="确认修改" id="updateSignOn"></td>
                                <td id="msg"></td>
                            </tr>



                        </tbody>
                    </table>


                    <h3>Account Information</h3>

                    <table>
                        <tbody>
                            <tr>
                                <td>First name:</td>
                                <td><input name="firstName" type="text" id="firstName">
                                </td>
                            </tr>
                            <tr>
                                <td>Last name:</td>
                                <td><input name="lastName" type="text" id="lastName"></td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td><input name="email" type="text" size="40" id="email">
                                </td>
                            </tr>
                            <tr>
                                <td>Phone:</td>
                                <td><input name="phone" type="text" id="phone"></td>
                            </tr>
                            <tr>
                                <td>Address 1:</td>
                                <td><input name="address1" type="text" size="40" id="address1"></td>
                            </tr>
                            <tr>
                                <td>Address 2:</td>
                                <td><input name="address2" type="text" size="40" id="address2"></td>
                            </tr>
                            <tr>
                                <td>City:</td>
                                <td><input name="city" type="text" id="city"></td>
                            </tr>
                            <tr>
                                <td>State:</td>
                                <td><input name="state" type="text" size="4" id="state">
                                </td>
                            </tr>
                            <tr>
                                <td>Zip:</td>
                                <td><input name="zip" type="text" size="10" id="zip"></td>
                            </tr>
                            <tr>
                                <td>Country:</td>
                                <td><input name="country" type="text" size="15" id="country"></td>
                            </tr>
                        </tbody>
                    </table>

                    <h3>Profile Information</h3>

                    <table>
                        <tbody>
                            <tr>
                                <td>Language Preference:</td>
                                <td><select name="languagePreference" id="languagePreference">
                                        <option selected="selected" value="english">english</option>
                                        <option value="japanese">japanese</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td>Favourite Category:</td>
                                <td><select name="favouriteCategoryId" id="favouriteCategoryId">

                                        <option value="FISH">FISH</option>
                                        <option value="DOGS">DOGS</option>
                                        <option value="REPTILES">REPTILES</option>
                                        <option value="CATS">CATS</option>
                                        <option value="BIRDS">BIRDS</option>
                                    </select></td>
                            </tr>
                            <tr>
                                <td>Enable MyList</td>
                                <td><input name="listOption" value="true" type="checkbox" id="listOption"></td>
                            </tr>
                            <tr>
                                <td>Enable MyBanner</td>
                                <td><input name="bannerOption" value="true" type="checkbox" id="bannerOption"></td>
                            </tr>

                        </tbody>
                    </table>


                    <input value="Save Account Information" type="button" id="updateAll">

                </form>
                <a href="/order/listOrders">My Orders</a>

            </div>
        </div>
        <%= require('./common/footer.htm')%>
</body>

</html>